<template>
  <div class="edit-box-card">
    <el-dialog width="600px" title="修改卡密商品" v-model="dialogFormVisible" :draggable="true" @close="dialogClose">
      <el-form ref="dialogFormRef" :model="dialogForm" :rules="dialogFormRules">
        <el-row>
          <el-col :span="12">
            <el-form-item prop="cardNum" label="卡号">
              <el-input style="width:90%;" :disabled="true" v-model="dialogForm.cardNum" placeholder="请输入卡号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="cardCode" label="兑换码">
              <el-input style="width:90%;" v-model="dialogForm.cardCode" placeholder="请输入兑换码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="cardStatus" label="卡密状态">
              <el-select style="width:90%;" v-model="dialogForm.cardStatus" clearable no-data-text="请选择卡密状态" @change="cateChange">
                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="cardCode" label="入库时间">
              <el-date-picker style="width:90%;" :disabled="true" v-model="dialogForm.createTime" type="datetime"
                placeholder="入库时间" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="expireTime" label="有效期">
              <el-date-picker style="width:90%;" v-model="dialogForm.expireTime" value-format="x" type="datetime"
                placeholder="有效期" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="saleTime" label="售出时间">
              <el-date-picker style="width:90%;" v-model="dialogForm.saleTime" value-format="x" type="datetime"
                placeholder="售出时间" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="orderId" label="关联订单">
              <el-input style="width:90%;" v-model="dialogForm.orderId" placeholder="请输入关联订单" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button style="margin-left:auto;" @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitHandle">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from 'vue'
import { successDeal, warningDeal } from '@/utils/utils'
import api from '../api'
export default {
  setup(props, context) {
    const dialogFormRef = ref(null)

    const state = reactive({
      dialogFormVisible: false,
      dialogForm: {},
      oldCardCode: null,
      dialogFormRules: {},
      statusOptions: [
        {
          value: 1,
          label: '可售',
        },
        {
          value: 2,
          label: '销售中',
        },
        {
          value: 3,
          label: '已售出',
        },
        {
          value: 4,
          label: '兑换',
        },
        {
          value: 5,
          label: '过期',
        },
        {
          value: 6,
          label: '作废',
        },
      ],
    })

    function dialogShow(data) {
      state.dialogForm = { ...data }
      state.oldCardCode = state.dialogForm.cardCode
      state.dialogFormVisible = true
    }

    function submitHandle() {
      dialogFormRef.value.validate((valid, fields) => {
        if (valid) {
          let obj = {
            cardNum: state.dialogForm.cardNum,
            cardStatus: state.dialogForm.cardStatus,
            expireTime: state.dialogForm.expireTime,
            saleTime: state.dialogForm.saleTime,
            orderId: state.dialogForm.orderId,
            goodsId: state.dialogForm.goodsId,
          }
          if (state.oldCardCode != state.dialogForm.cardCode) {
            obj = {
              cardCode: state.dialogForm.cardCode,
              cardNum: state.dialogForm.cardNum,
              cardStatus: state.dialogForm.cardStatus,
              expireTime: state.dialogForm.expireTime,
              saleTime: state.dialogForm.saleTime,
              orderId: state.dialogForm.orderId,
              goodsId: state.dialogForm.goodsId,
            }
          }
          api.cardInventoryModify(obj).then(res => {
            if (res.code == '200') {
              successDeal(res.msg)
              context.emit('dialogClose')
              state.dialogFormVisible = false
            } else {
              warningDeal(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        }
      })
    }

    function dialogClose() {
      dialogFormRef.value.resetFields()
    }

    return {
      ...toRefs(state),
      dialogFormRef,
      dialogShow,
      submitHandle,
      dialogClose,
    }
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-form) {
  .el-date-editor.el-input,
  .el-date-editor.el-input__wrapper {
    width: 90% !important;
  }
}
</style>